<!-- 基本信息 -->
<template>
	<a-form>
		<a-form-item label="用户名:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
			{{formItem.username}}
		</a-form-item>
		<a-form-item label="用户姓名:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
			<a-input allClear v-model="formItem.name" style="width: 300px" placeholder="请输入用户姓名"/>
		</a-form-item>
		<a-form-item label="用户邮箱:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
			<a-input v-model="formItem.email" style="width: 300px" placeholder="请输入用户邮箱"/>
		</a-form-item>
		<a-form-item label="用户手机:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
			<a-input v-model="formItem.phone" style="width: 300px" placeholder="请输入用户手机"/>
		</a-form-item>
		<!-- <a-form-item label="用户单位:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
			<a-input v-model="formItem.company" style="width: 300px" placeholder="请输入用户单位"/>
		</a-form-item>
		<a-form-item label="单位地址:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
			<a-input v-model="formItem.company_address" style="width: 300px" placeholder="请输入单位地址"/>
		</a-form-item> -->
		<a-form-item :wrapper-col="{ span: 16, offset: 4  }">
		    <a-button type="primary" style="width: 150px;" :disabled="isdisabledFn" @click="formBtn">保存</a-button>
		</a-form-item>
	</a-form>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import Vue from 'vue';
  import { USER } from '@/store/mutation-types';
  export default {
      name: "EditInfo",
      data() {
          return {
            isdisabled: true,//按钮状态
            userInfo: {},//local用户信息

            formItem:{
              id: '',
              username: '',//用户名，必填
              company: '',//公司名称
              company_address: '',//公司地址
              email: '',//邮箱
              name: '',//用户姓名
              phone: '',//手机
            },
          }
      },
      mounted() {
        //获取local里面当前的用户信息
        this.userInfo = Vue.ls.get(USER);
      },
      watch: {
        userInfo(){
          this.formItem.username = this.userInfo.username
          this.formItem.email = this.userInfo.email
          this.formItem.company = this.userInfo.company
          this.formItem.phone = this.userInfo.phone
          this.formItem.company_address = this.userInfo.company_address
          this.formItem.name = this.userInfo.name
        },
        userDetail(){
          this.userInfo = this.userDetail;
        }
      },
      computed: {
      	...mapState({
          requestCode: state => state.Passport.requestCode,
          userDetail: state => state.UserBasicInfo.UserDetail,
      	}),
        isdisabledFn(){
          if(this.formItem.company == ''
            && this.formItem.company_address == ''
            && this.formItem.email == ''
            && this.formItem.name == ''
            && this.formItem.phone == ''){
              return this.isdisabled = true;
          } else {
              return this.isdisabled = false;
          }
    　　},
      },
      methods: {
        ...mapActions({
          editUser: 'Passport/editUser',//编辑
          userDetailFun: 'UserBasicInfo/userDetail',//基本信息
        }),
        formBtn() {
          //用户名
          this.formItem.username = this.userInfo.username
          //用户id
          this.formItem.id = this.userInfo.id
          //删除空的键值
          for ( var key in this.formItem ){
            if ( this.formItem[key] === '' ){
              delete this.formItem[key]
            }
          }
          this.editUser(this.formItem)
          setTimeout(() => {
            this.userDetailFun()
          }, 1000);
        }
      },
    }
</script>

<style scoped>

</style>
